<template>
<div class="commodity">
    <el-row>
      <span>{{ msg }}</span>
    </el-row>
    <el-row class="buttonBar">
     <el-button type="success" @click="reflushHandler()">{{ reflus_btn }}</el-button>
      <el-button  @click="isDlgShowAdd=!isDlgShowAdd" type="primary">{{ add_btn }}</el-button>
    </el-row>
    <addcommodity v-if="isDlgShowAdd" @close-hdl="closeHandler()" @save-product-hdl="saveProductHandler()"></addcommodity>
    <commodityproperty v-if="isDlgShowSpec" @close-hdl="closeHandler()" :selId ="selId"></commodityproperty>
    <el-row>
        <el-table
            :data="commoditydata"
            style="width: 100%"
            height="620"
            v-loading="loading"
            stripe
            border
            >
            <el-table-column
              fixed
              prop="name"
              label="商品名称"
              width="180">
            </el-table-column>
            <el-table-column
              label="缩略图"
              width="100">
                <template slot-scope="scope">
                    <el-popover
                    placement = "bottom"
                    trigger="hover"
                    width="250"
                    height="150">
                    <div style="text-align: right; margin: 0">
                        <img v-bind:src="scope.row.thumb" width="250" height="150"/>
                    </div>
                       <img slot="reference" v-bind:src="scope.row.thumb" width="40" height="40"/>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
              label="是否上架"
              width="100">
                <template slot-scope="scope">
                   <el-button  size="mini" v-bind:type="handleGetType(scope.row.isValid)">{{scope.row.isValid?"已上架":"已下架"}}</el-button>
                </template>
            </el-table-column>
            <el-table-column
              prop="province"
              label="省份/城市"
              width="150">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              width="100">
            </el-table-column>
            <el-table-column
              prop="storage"
              label="库存"
              width="100">
            </el-table-column>
            <el-table-column
              prop="level"
              label="赛道等级"
              width="100">
            </el-table-column>

            <el-table-column
              label="所属目录"
              width="180">
                <template slot-scope="scope">
                    <el-tag>*商品目录列表:{{scope.row.categorys.length}}个</el-tag>
                </template>
            </el-table-column>
            <el-table-column
              label="商品型号"
              width="250">
                 <template slot-scope="scope">
                   <el-button  size="mini"
                    @click="openCommodityspec(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column
              prop="operate"
              label="操作"
              width="150">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
    </el-row>
     <el-row  class="pageBar">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="prev, pager, next, jumper"
         :total="count">
      </el-pagination>
    </el-row>
</div>
</template>
<script>
import addcommodity from "./addcommodity";
import commodityproperty from "./commodityproperty";
export default {
    created() {
        this.reflushHandler();
    },
    name: "commodity",
    components: { addcommodity: addcommodity, commodityproperty: commodityproperty },
    data() {
        return {
            isDlgShowAdd: false,
            isDlgShowSpec: false,
            admin: this.$persistence.get("admin"),
            currentPage: 1,
            pagesize: 8,
            count: 0,
            selId: 0,
            msg: "商品列表",
            reflus_btn: "刷新数据",
            add_btn: "添加商品",
            commoditydata: [],
            loading: true
        };
    },
    methods: {
        saveProductHandler() {
            this.reflushHandler();
        },
        reflushHandler() {
            this.findProductList((this.currentPage - 1) * this.pagesize, this.pagesize);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.reflushHandler();
        },
        closeHandler() {
            this.isDlgShowAdd = false;
            this.isDlgShowSpec = false;
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            const id = row.id;
            this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$axiosPost(
                    "/AdminService/deleteProduct",
                    {
                        session: this.admin.session,
                        productId: id
                    },
                    response => {
                        if (response.data.ok) {
                            this.$message({
                                message: "删除成功",
                                type: "warning"
                            });
                            if (index !== -1) {
                                this.reflushHandler();
                            }
                        }
                    }
                );
            });
        },
        openCommodityspec(index, row) {
            this.selId = row.id;
            this.isDlgShowSpec = !this.isDlgShowSpec;
        },
        findProductList(skip, take) {
            this.$axiosPost(
                "/AdminService/findProductList",
                {
                    session: this.admin.session,
                    opts: {
                        skip: skip,
                        take: take
                    }
                },
                response => {
                    this.count = response.data.count;
                    this.commoditydata = this.formatCommoditydatalist(response.data.list);
                    this.loading = false;
                },
                error => {
                    this.loading = false;
                }
            );
        },
        handleGetType(isValid) {
            if (isValid) {
                return "primary";
            } else {
                return "danger";
            }
        },
        formatCommoditydatalist(list) {
            let userlist = [];
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                userlist.push({
                    id: element.id,
                    name: element.name,
                    price: element.price,
                    thumb: element.thumb,
                    categorys: element.categorys ? element.categorys : [],
                    isValid: element.isValid,
                    slides: element.slides ? element.slides : [],
                    storage: element.storage,
                    level: element.level,
                    province:
                        element.province +
                        (element.city == null || element.city == "" ? element.city : "/" + element.city)
                });
            }
            return userlist;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
    margin: 0;
}
span {
    font-weight: normal;
}
.imgclass {
    border: 4;
}
.buttonBar {
    margin-bottom: 10px;
    text-align: right;
}
.pageBar {
    margin-top: 10px;
    text-align: center;
}
</style>